<template>
	<view class="Ranking">
		<text style="font-size: 12px; 	margin-left: 10px;">我的歌单</text>
		<view class="elaborate" style="font-size: 13px;">
			我创建的歌单
			<view class="more" @click="toMoreRanking">查看更多</view>
		</view>

		<swiper class="swiper-box" @change="change">
			<swiper-item class="swiper-item" v-for="(item, index) in info" :key="index">
				<text class="title" @click="details">{{ item.musicListName }} ></text>
				<view class="item" v-for="(item2, index2) in currentList" :key="index2">
					<image :src="pubUrl + item2.musicImg" class="cover"></image>
					<text class="songName">{{ index2 }}</text>
					<text class="songName" style="width: 80%;">{{ item2.musicName }}</text>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { musiclistgetallbyuser, getbymusiclist, getbymylike } from '@/api/song';
import { pubUrl } from '@/api/http.js';
export default {
	name: 'ranking',
	data() {
		return {
			info: [],
			current: 0,
			mode: 'round',
			currentList: [],
			pubUrl: pubUrl
		};
	},
	methods: {
		//组件滑动之后的监听
		change(e) {
			this.current = e.detail.current;
			this.getbymusiclistApi();
		},
		//跳转到歌单页面
		details() {
			uni.navigateTo({
				url: '/pages/songSheet/songSheet?id=' + this.info[this.current].id
			});
		},
		//去我创建的歌单页面
		toMoreRanking() {
			uni.navigateTo({
				url: '/pages/moreRanking/moreRanking'
			});
		},
		//获取用户创建的歌单
		musiclistgetallbyuserApi() {
			musiclistgetallbyuser().then(res => {
				this.info = res.data;
				this.getbymusiclistApi();
			});
		},
		//获取歌单里面的歌曲
		getbymusiclistApi() {
			getbymusiclist({ id: this.info[this.current].id }).then(res => {
				this.currentList = res.data;
				console.log(this.currentList);
			});
		},
	
	},
	created() {
		this.musiclistgetallbyuserApi();
	}
};
</script>

<style lang="less" scoped>
.Ranking {
	color: #8d8d8d;
	margin-top: 10px;

	.elaborate {
		position: relative;
		color: #000;
		margin-left: 10px;
		height: 21px;
		.more {
			position: absolute;
			right: 10px;
			top: -1px;
			border-radius: 15px;
			border: solid #000 1px;
			font-size: 10px;
			padding: 3px;
		}
	}
	.swiper-box {
		margin-top: 10px;
		height: 100%;
		position: absolute;
		width: 100%;
		overflow-y: scroll;
		padding-bottom: 50px;
		.swiper-item {
			overflow-y: scroll;
			color: #000;
			.title {
				color: #000;
				margin-left: 5px;
				font-size: 13px;
			}
			.item {
				display: flex;
				align-items: center;
				margin: 5px;

				.cover {
					width: 30px;
					height: 30px;
					border-radius: 5px;
				}
				.songName {
					width: 30px;
					margin-left: 20px;
				}
			}
		}
	}
}
</style>
